<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '个人中心',
  },
}
</route>

<template>
  <div class="container pb-7.5 px-4 box-border bg-[#f7f7f7] pt-5">
    <!-- 菜单信息 -->
    <div class="menu pt-2 bg-[#fff] text-[16px] text-[#666666]">
      <div
        class="menu-item py-4 px-4 flex items-center"
        v-for="(item, index) in data"
        :key="index"
        @click="jumpPage(item.url)"
      >
        <image :src="item.icon" mode="widthFix" class="w-[15px] mr-2"></image>
        <div class="label">
          {{ item.label }}
        </div>
        <div class="right">
          <!-- <image src="@/static/images/right-arrow2.png" mode="widthFix" class="w-[14px]"></image> -->
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <div class="logout mt-10" @click="handelLoginOut">退出登录</div>
    <!-- 底部电话 -->
    <div class="phone text-[12px] text-[#666666]">客服电话：400-1234-5678</div>
  </div>
</template>

<script setup lang="ts">
import p1 from '@/static/images/setting.png'
import p2 from '@/static/images/commission.png'
import { useStorage } from '@/utils/storage'
const { clear } = useStorage()
const data = ref([
  {
    icon: p1,
    label: '我的资料',
    url: '/pages/user/people/index',
  },
  {
    icon: p2,
    label: '我的订单',
    url: '/pages/user/orders/index',
  },
])
// 跳转页面
function jumpPage(url: string) {
  uni.navigateTo({
    url,
  })
}
function handelLoginOut() {
  clear()
  uni.reLaunch({
    url: '/pages/login/index',
  })
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  min-height: 100vh;

  .menu {
    position: relative;
    border-radius: 10px;
  }

  .menu-item {
    border-bottom: 1px solid #f7f7f7;
    .right {
      margin-left: auto;
    }
  }

  .logout {
    border-radius: 4px;
    background: #56b756;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .phone {
    position: absolute;
    left: 0;
    bottom: 30rpx;
    width: 100%;
    text-align: center;
  }
}
</style>
